<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <table border="1">
        <!--caption: 表格标题-->
        <caption>国产优秀电动汽车</caption>
        <!--表格表头-->
        <tr>
            <td>编号</td>
            <td>名字</td>
            <td>价格</td>
            <td>类型</td>
        </tr>
        <!--循环对象car和循环变量i,i非必须-->
        <tr v-for="(car,i) in arr">
            <td>{{i+1}}</td>
            <td>{{car.name}}</td>
            <td>{{car.price}}</td>
            <td>{{car.type}}</td>
        </tr>
    </table>
    <h1 v-for="car in arr">{{car.name}}---{{car.price}}</h1>
</div>
<!--绑定Vue插件-->
<script src="../js/vue.js"></script>
<script>
    /*创建Vue对象*/
    let v = new Vue({
      el:"div",
      data:{
          /*arr数组*/
          arr:[{name:"比亚迪汉EV",price:250000,type:"轿车"},
              {name:"极氪001",price:300000,type:"轿跑"},
              {name:"蔚来ET7",price:500000,type:"轿车"},]
      }
    })
</script>
</body>
</html>